import React from 'react'
import { View } from '@tarojs/components'
import './index.scss'

type PageProps = {}

type PageState = {
  date: Date
}

interface Index {
  props: PageProps
}
class Index extends React.Component<PageProps, PageState> {
  constructor(props) {
    super(props)
    this.state = { date: new Date() }
  }

  componentWillMount() {
    // 在渲染前调用,在客户端也在服务端。
    console.log('Component WILL MOUNT!')
  }
  componentDidMount() {
    // 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。
    // 如果你想和其他JavaScript框架一起使用
    // 可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    console.log('Component DID MOUNT!')
    this.timerID = setInterval(() => this.tick(), 1000)
  }
  componentWillReceiveProps(newProps) {
    // 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    console.log('Component WILL RECEIVE PROPS!')
  }
  shouldComponentUpdate(newProps, newState) {
    // 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    // 可以在你确认不需要更新组件时使用。
    return true
  }
  componentWillUpdate(nextProps, nextState) {
    // 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    console.log('Component WILL UPDATE!')
  }
  componentDidUpdate(prevProps, prevState) {
    // 在组件完成更新后立即调用。在初始化时不会被调用。
    console.log('Component DID UPDATE!')
  }
  componentWillUnmount() {
    // 在组件从 DOM 中移除之前立刻被调用。
    console.log('Component WILL UNMOUNT!')
    clearInterval(this.timerID)
  }

  timerID: NodeJS.Timeout

  tick() {
    this.setState({
      date: new Date(),
    })
  }

  render() {
    return (
      <View>
        <View>Hello, world!</View>
        <View>It is {this.state.date.toLocaleTimeString()}.</View>
      </View>
    )
  }
}
export default Index
